<template>
    <div class="components_edit_modal">
        <el-dialog title="添加授课资料" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <el-form :model="form"   :rules="rules" ref="form">
                <el-form-item label="学校："  prop="schoolId">
                    <el-select clearable filterable v-model="form.schoolId" placeholder="请选择学校" @change="changeSchool">
                        <el-option
                            v-for="item in schoolList" :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学院：" prop="secondSchoolId">
                    <el-select clearable filterable v-model="form.secondSchoolId" placeholder="请选择学院" @change="changeSecondSchool">
                        <el-option
                            v-for="item in secondSchoolList" :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属专业：" prop="professionId">
                    <el-select clearable filterable v-model="form.professionId" placeholder="请选择专业" @change="changeProfession">
                        <el-option
                            v-for="item in professionList" :key="item.id"
                            :label="item.text"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年级：" prop="grade">
                    <el-select clearable filterable v-model="form.grade" placeholder="请选择年级" @change="changeGrade">
                        <el-option
                            v-for="item in gradeList" :key="item.grade"
                            :label="item.gradeShow"
                            :value="item.grade">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教学周：" prop="teachWeek">
                    <el-select clearable filterable v-model="form.teachWeek" placeholder="请选择教学周">
                        <el-option
                            v-for="item in teachWeekList" :key="item.week"
                            :label="'第'+item.week+'周'"
                            :value="item.week">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程：" prop="courseNo">
                    <el-select clearable filterable v-model="form.courseNo" placeholder="请选择课程">
                        <el-option
                            v-for="item in courseList" :key="item.courseNo"
                            :label="item.courseName"
                            :value="item.courseNo">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--
                <el-form-item label="资料名称：" prop="name">
                    <el-input v-model="form.name" auto-complete="off" style="width:535px;">
                    </el-input>
                </el-form-item>
                -->
                <br>
                <el-form-item label="上传附件：" prop="attachment" class="lineblock">
                    <pl-upload
                        :initionData = "form.attachment"
                        :imageOnly = "false"
                        :multiFile = "true"
                        :displaymode ="'text'"
                        :buttonIds = '{select:"teach-selectfiles1",upload:"teach-postfiles1",container:"teach-container1"}'
                        @reloadFiles="reloadFiles"
                        ref="plUpload">
                    </pl-upload>

                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit" size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import { mapGetters } from 'vuex'
    import PlUpload from "@/components/common/PlUpload.vue"
    export default {
        components: {
            PlUpload,
        },
        data() {
            return {
                 state: false,
                 rules: {
                    schoolId: [
                        { required: true, message: '请选择院校', trigger: 'change', type: 'number' }
                    ],
                    secondSchoolId: [
                         { required: true, message: '请选择院系', trigger: 'change', type: 'number' }
                    ],
                    professionId: [
                        { required: true, message: '请选择所属专业', trigger: 'change', type: 'number'},
                    ],
                    grade: [
                        { required: true, message: '请选择年级', trigger: 'change', type: 'string'},
                    ],
                    courseNo: [
                        { required: true, message: '请选择课程', trigger: 'change', type: 'string'},
                    ],
                    teachWeek: [
                        { required: true, message: '请选择教学周', trigger: 'change', type: 'number'},
                    ],
                    attachment: [
                        { required: true, message: '请选择上传附件', trigger: 'change', type: 'array'},
                    ],
                 },
                form: {
                    schoolId:null,
                    schoolName:null,
                    secondSchoolId:null,
                    secondSchoolName:null,
                    professionId:null,
                    professionName:null,
                    grade:null,
                    courseNo:null,
                    courseName:null,
                    teachWeek:null,
                    attachment:[]
                },
                upload:{
                    files:[],
                },
                // 学校列表
                //schoolList:null,
                // 二级院校列表
                secondSchoolList:null,
                // 专业列表
                professionList:null,
                // 年级列表
                gradeList:null,
                // 教学周列表
                teachWeekList: null,
                // 课程列表
                courseList: null,
                // 班级列表
                //semesterList:null,

            }
        },
        created() {
            // 查询课程列表集合
            this.getCourseList();
            // 获取学期列表数据
            // this.getSemesterListByDicts();

        },
        mounted() {},
        computed:{
            ...mapGetters({
                schoolList: 'getSchoolList',
            }),
        },
        methods: {
            // 打开模态框
            showDialog(){
                this.state = true;
                this.$nextTick(function(){
                    this.$refs['form'].resetFields();
                    this.$refs.plUpload.resetData();
                })
            },
             // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
             // 获取二级院系数据
            getProfessionList(schoolId, secondSchoolId) {
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询年级 (来自班级表数据)
            getGradeList(professionId){
                let vm = this;
                vm.axios.get(api.schoolClass.queryGradeList, {
                     params: {
                        professionId: professionId,
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.gradeList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询课程信息列表( 来自培养计划 )
            getCourseList(){
                let vm = this;
                vm.axios.get(api.queryTrainPlanCourseByUserId).then((response) => {
                    if (response.data.success) {
                        this.courseList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询教学周( 来自校历 )
            getTeachWeekList(professionId, grade){
                let vm = this;
                vm.axios.get(api.queryTeachWeekByProfessionId + professionId + "/" + grade).then((response) => {
                    if (response.data.success) {
                        this.teachWeekList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询学期列表(来自字典)
            getSemesterListByDicts(){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl, {
                     params: {
                        type: "semester_type",
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.semesterList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取上传文件集合
            reloadFiles(files){
                console.log(files)
                let vm = this;
                this.form.attachment = [];
                files.forEach((item,idnex)=>{
                    let model = {
                        fileRealName: item.fileRealName,
                        objectKey: item.objectKey
                    }

                    this.form.attachment.push(model)
                })
                this.$refs['form'].validateField("attachment");
            },
            // 保存
            submit() {
                let vm = this;
                vm.$refs['form'].validate((valid) => {
                    if (valid) {
                        // 处理数据
                        vm.form.schoolName = _.find(vm.schoolList, {id: vm.form.schoolId}).text;
                        vm.form.secondSchoolName = _.find(vm.secondSchoolList, {id: vm.form.secondSchoolId}).text;
                        vm.form.professionName =  _.find(vm.professionList, {id: vm.form.professionId}).text;
                        vm.form.courseName =  _.find(vm.courseList, {courseNo: vm.form.courseNo}).courseName;
                        let gradeShow =  _.find(vm.gradeList, {grade: vm.form.grade}).gradeShow;
                        let teachWeekText = "第"+ vm.form.teachWeek + "周";
                        // 组装名称
                        vm.form.name = vm.form.schoolName + "-" + vm.form.secondSchoolName + "-" + vm.form.professionName
                                    + "-" + gradeShow + "-" + vm.form.courseName + "-" + teachWeekText + "授课资料"
                        console.log(this.form);
                        //return;
                        vm.axios.post(api.teachMaterials.add, vm.form)
                        .then((response) => {
                            if (response.data.success) {
                                vm.$message({
                                    type: 'success',
                                    message: response.data.msg,
                                });
                                // 关闭弹出窗口
                                vm.state = false;
                                // 刷新table
                                vm.$parent.$refs.teachMaterialsTable.$emit('vuetable:refresh');
                            } else {
                                vm.$message.error(response.data.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                });

            },
            changeSchool(schoolId){
                this.form.secondSchoolId = null;
                this.secondSchoolList = [];
                this.form.professionId = null;
                this.professionList = [];
                this.form.grade = null;
                this.gradeList = [];
                this.form.teachWeek = null;
                this.teachWeekList = [];
                this.getSecondSchoolList(schoolId);
            },
            changeSecondSchool(secondSchoolId){
                this.form.professionId = null;
                this.professionList = [];
                this.form.grade = null;
                this.gradeList = [];
                this.form.teachWeek = null;
                this.teachWeekList = [];
                this.getProfessionList(this.form.schoolId, secondSchoolId);
            },
            changeProfession(professionId){
                this.form.grade = null;
                this.gradeList = [];
                this.form.teachWeek = null;
                this.teachWeekList = [];
                this.getGradeList(professionId);
            },
            changeGrade(grade){
                this.form.teachWeek = null;
                this.teachWeekList = [];
                this.getTeachWeekList(this.form.professionId, grade);
            }
        },
    };
</script>
<style>
</style>